<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta charset="utf-8">
        <meta name="renderer" content=webkit>
      

        <!-- 引入vue -->
        <script src="../js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../js/jQyery.js"></script>
        <script src="../js/layer/layer.js"></script>
        <script src="../js/new.js"></script>
        <script src="../js/element/element.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../js/element/element.css">
        <link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/maincontent.css">

     
    </head>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <body>
        <div class="index_main" id="app" v-on:click="hidediaolog" v-cloak>
            <div class="index_mainhead">
                <div class="imh_left">
                    <img class="index_logo" src="../img/logowhite.png">
                    <el-tooltip class="item" effect="light" content="折叠" placement="right" v-if="!isCollapse" >
                        <img class="index_action" src="../img/logonext.png" v-on:click="changemenu">
                    </el-tooltip>

                    <el-tooltip class="item" effect="light" content="展开" placement="right" v-if="isCollapse">
                        <img class="index_action"  src="../img/right.png" v-on:click="changemenu">
                    </el-tooltip>
                  
                </div>
                <div class="imh_right">
                    <div class="right_notice" v-on:click.stop="shownoticedialog">
                        <el-badge :value="12" :max="99" class="item">
                            <img class="right_noticeimg" src="../img/jinbao.png">
                        </el-badge>
                        <div class="noticelist" v-if="shownotice">
                            <div class="noticediv">
                                <img src="../img/yiji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/erji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/sanji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/yiji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/erji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/sanji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticebottom">
                                <span>点击查看更多</span>
                            </div>
                        </div>
                    </div>
                    <div class="title_rightdiv" v-on:click.stop="showlangdialog">
                        <img :src="langinfo.img">
                        <span style="margin-left: 0.1rem;color: #fff">{{langinfo.name}}</span>
                        <img src="../img/xlwhite.png" style="margin-left: 0.05rem;">
                    </div>
                    <div class="head_line">

                    </div>
                    <div class="head_loginout">
                        <img src="../img/tuichu.png">
                    </div>
                </div>

                <div class="changelang" v-if="showlang" style="right: 0.14rem;top: 0.86rem">
                    <template v-for="item in langlist">
                        <div class="landiv" :class="{choselandiv:item.img===langinfo.img}" v-on:click="chosethis(item)">
                            <img :src="item.img">
                            <span>{{item.name}}</span>
                        </div>
                    </template>
                    
                </div>
            </div>
            <div class="index_maincontent">
                <div class="imc_left">
                    <div class="imc_userinfo" v-on:click.stop="showuserinfoactiondialog" v-if="!isCollapse">
                        <div class="userimg">
                            <img src="../img/tx.png">
                        </div>
                        <div class="userinfo" >
                            <div class="usertitle">
                                <span>智棚物联网</span>
                            </div>
                            <div class="userdesc">
                                <span>管理员</span>
                            </div>
                        </div>

                        <div class="userinfoaction" v-if="showuserinfoaction">
                            <div class="actionimg">
                                
                            </div>
                            <div class="actionlist">
                                <div class="actiondiv">
                                    <i class="el-icon-user"></i>
                                    <span>基本资料</span>
                                </div>
                                <div class="actiondiv">
                                    <i class="el-icon-edit-outline"></i>
                                    <span>修改密码</span>
                                </div>
                                <div class="actiondiv">
                                    <i class="el-icon-switch-button"></i>
                                    <span>退出</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="indexmenu">
                        <el-menu
                            ref="menu"
                            default-active="1"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            :collapse="isCollapse"
                            background-color="#1A2F70"
                            text-color="#dfdfdf"
                            :unique-opened="true"
                            :collapse-transition="false">
                            <el-menu-item index="2" v-on:click="hidefarmlist">
                                <i class="el-icon-s-home"></i>
                                <span slot="title">首页</span>
                            </el-menu-item>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-s-grid"></i>
                                    <span>农场列表</span>
                                </template>
                                <el-menu-item-group class="seconditem" style="background: #253C82">
                                    <el-menu-item index="1-1">选项1</el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                    <el-menu-item index="1-3" >选项3</el-menu-item>
                                    <el-submenu index="1-4">
                                        <template slot="title">选项4</template>
                                        <el-menu-item class="thirditem" index="1-4-1">选项1</el-menu-item>
                                    </el-submenu>
                                </el-menu-item-group>
                            
                                
                           
                        
                            </el-submenu>
                         
                            <el-menu-item index="3" v-on:click="hidefarmlist">
                              <i class="el-icon-s-platform"></i>
                              <span slot="title">智能场景</span>
                            </el-menu-item>
                            <el-menu-item index="4" v-on:click="hidefarmlist">
                              <i class="el-icon-s-order"></i>
                              <span slot="title">智棚服务</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                    
                </div>
                <div class="imc_right">
                    <div class="imc_righthead">
                        <span>首页</span>
                        <div class="imc_rightheadright" v-on:click.stop="showlistmeu=true">
                            <span>列表显示</span>
                            <img src="../img/liebiao.png">
                        </div>
                        <div class="headmenu" v-if="showlistmeu">
                            <div class="menudiv">
                                <span>列表显示</span>
                            </div>
                            <div class="menudiv">
                                <span>地图显示</span>
                            </div>
                           
                        </div>

                    </div>
                    <div class="mainright_content">
                        <div class="farmindex_main">
                            <div class="nofarm" v-if="farmlist.length==0">
                                <div class="nofarmdiv">
                                    <span>欢迎体验</span>
                                    <span class="orangespan">FARMNET</span>
                                    <span>智慧农场</span>
                                </div>
                                <div class="nofarmdiv">
                                    <span>点击下侧</span>
                                    <span class="bluespan">[添加农场]</span>
                                    
                                </div>
                                <div class="nofarmdiv">
                                    <span>连接智能设备</span>
                                    
                                    
                                </div>
                                <div class="nofarmdiv">
                                    <span>智造未来农场</span>
                                    
                                    
                                </div>
                                <div class="addfarmbtn">
                                    <div class="addfarm">
                                        <span>添加农场</span>
                                    </div>
                                </div>
                                
                                <!-- <div class="nofarmdiv"><span>Welcome to the experience</span> <span class="orangespan">FARMNET</span>
                                    <span>Wisdom farm</span></div>
                                <div class="nofarmdiv"><span>Click on the lower side</span> <span class="bluespan">[Add the farm]</span>
                                </div>
                                <div class="nofarmdiv"><span>Connect smart devices</span></div>
                                <div class="nofarmdiv"><span>Build the farm of the future</span></div>
                                <div class="addfarmbtn">
                                    <div class="addfarm"><span>Add the farm</span></div>
                                </div> -->
                                
                            </div>
                            <div class="farmlist" v-if="farmlist.length>0">
                                <template v-for="item in farmlist">
                
                                
                                    <div class="farmdiv">
                                        <div class="farmdiv_title">
                                            <div class="ft_left">
                                                <div class="ft_lefttop">
                                                    <span>{{item.farmname}}</span>
                                                    <img src="../img/bj.png" style="margin-left:5px;">
                                                    <img src="../img/sc.png" style="margin-left: 5px;">
                                                </div>
                                                <div class="ft_leftdesc">
                                                    <span>{{item.farmdesc}}</span>
                                                </div>
                                            </div>
                                            <div class="ft_right" v-on:click.stop="showmenudialog(item)">
                                                <img src="../img/gd.png">
                                            </div>
                                            <div class="titlemenu" v-if="item.showmenu">
                                                <div class="menudiv">
                                                    <i class="el-icon-circle-plus-outline"></i>
                                                    <span>添加设备</span>
                                                </div>
                                                <div class="menudiv">
                                                    <i class="el-icon-user"></i>
                                                    <span>管理成员</span>
                                                </div>
                                                <div class="menudiv">
                                                    <i class="el-icon-edit-outline"></i>
                                                    <span>更改名称</span>
                                                </div>
                                                <div class="menudiv">
                                                    <i class="el-icon-office-building"></i>
                                                        
                                                    <span>农场详情</span>
                                                </div>
                                            </div>
                                            
                                        </div>
                                        <div class="farmchildlist" v-if="item.children.length>0">
                                            <template v-for="itemjson in item.children">
                                                <div class="fcl_div" v-on:click="enterdiv(itemjson)" v-on:mouseleave="leavediv(itemjson)">
                                                    <div class="child_img">
                                                        <img :src="itemjson.img">
                                                    </div>
                                                    <div class="child_name">
                                                        <span>{{itemjson.name}}</span>
                                                        <img src="../img/bj.png" style="margin-left:5px;">
                                                        <img src="../img/sc.png" style="margin-left: 5px;">
                                                    </div>
                                                   
                                                    <div class="titlemenu" v-if="itemjson.showmenu" style="height:0.7rem;top:0.4rem;left:0rem;">
                                                        <div class="menudiv">
                                                            <i class="el-icon-cloudy-and-sunny"></i>
                                                            <span>环境控制</span>
                                                        </div>
                                                        <div class="menudiv">
                                                            <i class="el-icon-grape"></i>
                                                            <span>水肥控制</span>
                                                        </div>
                                                        
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-if="item.children.length>0">
                                                <div class="fcl_div">
                                                    <div class="child_img">
                                                        <img src="../img/ckgd.png">
                                                    </div>
                                                    <div class="child_name">
                                                        <span>查看更多</span>
                                                    </div>
                                                </div>
                                                <div class="fcl_div">
                                                    <div class="child_img">
                                                        <img src="../img/tianjia.png">
                                                    </div>
                                                    <div class="child_name">
                                                        <span>添加</span>
                                                    </div>
                                                </div>
                                            </template>
                                            
                                        </div>
                                        <!-- <div class="farmchildlist" v-if="item.children.length>0">
                                           
                                        
                                        </div> -->
                                        <div class="nochild" v-if="item.children.length==0">
                                            <div class="listaddchild">
                                                <img src="../img/tianjia.png">
                                            </div>
                                            <div class="addchilddesc">
                                                <span>添加温室/地块/鱼池/其它</span>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                
                                <div class="farmdiv listaddfarm">
                                    
                                    <div class="addfarmdiv">
                                        <img src="../img/tjnc.png">
                                    </div>
                                    <div class="addfarmdesc">
                                        <img src="../img/jia.png">
                                        <span>添加农场</span>
                                    </div>
                                    
                
                                </div>
                            </div>
                
                            
                        </div>
                        <!-- <iframe src="./farmindex.html"></iframe> -->
                    </div>
                    <div class="mainright_footer">
                        <span>Copyright © 1996-2019 SINA Corporation All Rights Reserved</span>
                    </div>
                </div>
            </div>

        </div>
    </body>

</html>
<script>
    delay_script_load();
    var loginvue=new Vue({
        el: '#app',
        data:function(){
            return {
                langinfo:{
                    name:"简体中文",
                    img:'../img/cn.png'
                },
                showlang:false,
                shownotice:false,
                showuserinfoaction:false,
                isCollapse:false,
                langlist:[
                    {
                        img:'../img/cn.png',
                        name:'简体中文'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },

                ],
                farmlist:[
                {
                        farmname:'开远农场',
                        farmdesc:"玫瑰种植",
                        children:[
                            {
                                img:"../img/tx.png",
                                name:'切花温室',
                                showmenu:false,
                                showmenuclick:false,
                            },
                            {
                                img:"../img/tx.png",
                                name:'切花温室',
                                showmenu:false,
                                showmenuclick:false,
                            },
                            {
                                img:"../img/tx.png",
                                name:'切花温室',
                                showmenu:false,
                                showmenuclick:false,
                            }
                        ],
                        showmenu:false
                    },
                    {
                        farmname:'开远农场',
                        farmdesc:"玫瑰种植",
                        children:[
                          
                        ],
                        showmenu:false
                    },
                ],
                showlistmeu:false,
                
            }
        },
        computed: {
            
        },
        created:function() {
           
        },
        mounted:function(){
            
         
           
        },
        methods:{
            showlangdialog:function(){
                this.showlang=!this.showlang;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            hidediaolog:function(){
                this.showlang=false;
                this.shownotice=false;
                this.showuserinfoaction=false
                this.showlistmeu=false;
            },
            showuserinfoactiondialog:function(){
                this.showuserinfoaction=!this.showuserinfoaction;
                this.shownotice=false;
                this.showlang=false;
            },
            chosethis:function(item){
                this.langinfo=item
                this.showlang=false;
            },
            shownoticedialog:function(){
                this.shownotice=!this.shownotice;
                this.showlang=false;
                this.showuserinfoaction=false
               

            },
            handleOpen:function(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose:function(key, keyPath) {
                console.log(key, keyPath);
            },
            changemenu:function(){
                this.isCollapse=!this.isCollapse
                if(this.isCollapse){
                    $(".el-submenu__title span").hide();
                    $(".el-menu-item span").hide();
                    $(".el-submenu__title i").eq(1).hide();
                    $(".imc_left").css({"width":"auto","min-width":"auto"})
                    $(".indexmenu").css("height","100%")
                    
                }
                else{
                    $(".imc_left").css({"width":"2.6rem","min-width":"200px"})
                    $(".indexmenu").css("height","calc(100% - 0.96rem)")
                }
            },
            showmenudialog:function(item){
                this.farmlist.map(res=>{
                    res.showmenu=false;
                })
                item.showmenu=true;
                let _this=this;
                $(document).on("click",function(){
                    _this.farmlist.map(res=>{
                        res.showmenu=false;
                    })
                })
            },
            hidefarmlist:function(){
                this.$refs["menu"].close("1")
            },
            enterdiv:function(item){
                item.showmenu=true;
            },
            leavediv:function(item){
                item.showmenu=false;
            }
        }
    })
    $(document).on("click",function(){
        loginvue.hidediaolog();

    })

    function delay_script_load() {
        var script = document.createElement('script');
        script.src = "../js/index.js";
        document.body.appendChild(script);
    }  

</script>